import DrawsAbstract from "../DrawsAbstract";
import gsap from "gsap";

export default class DrawOk extends DrawsAbstract{
    drawStyle = {
        size: {
            width: 0,
            height: 0
        },
        position: {
            x: 0,
            y: 0
        },
        lineWidth: 10,
        leftLength: 0,
        rightLength: 0,
        color: 'rgba(44,238,0, 0)'
    }

    constructor(ctx: CanvasRenderingContext2D, size?: {width: number, height: number}, position?: {x: number, y: number}) {
        super(ctx, size, position);
    }

    realDraw() {
        this.drawX()
    }

    in() {
        this.drawStyle.position = this.position
        this.drawStyle.size = this.size
        gsap.to(this.drawStyle, {
            duration: this.baseDuration / 2,
            color: 'rgba(44,238,0, 1)',
            leftLength: 1
        })
        gsap.to(this.drawStyle, {
            delay: this.baseDuration / 2,
            duration: this.baseDuration / 2,
            rightLength: 1
        })
    }

    out() {
        gsap.to(this.drawStyle, {
            duration: this.baseDuration,
            color: 'rgba(44, 238, 0, 0)',
            leftLength: 0,
            rightLength: 0
        })
    }

    drawX() {
        this.ctx.strokeStyle = this.drawStyle.color
        this.ctx.lineWidth = this.drawStyle.lineWidth
        this.ctx.beginPath();
        this.ctx.moveTo(this.position.x, this.position.y +  2 / 3 * this.size.height)
        this.drawStyle.leftLength && this.ctx.lineTo(this.position.x + this.size.width * this.drawStyle.leftLength / 2, this.position.y + this.size.height * ( 2 / 3 + this.drawStyle.leftLength / 3))

        this.drawStyle.rightLength && this.ctx.lineTo(this.position.x + this.size.width * (0.5 + this.drawStyle.rightLength / 2), this.position.y + this.size.height * (1 - this.drawStyle.rightLength))
        this.ctx.stroke()
        this.ctx.closePath()
    }
}
